<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>组件化思想</title>
		<style>
			
		</style>
	</head>
	<body>
		<div id="app">
			<!-- 5.通过组件的名称利用标签进行调用 -->
			
			<add-num-com></add-num-com>
		</div>
		
		<!-- 3.定义html模板 -->
		<template id="addNumTem">
			<!-- 必须得有根标签 -->
			<div>
				<h1>定义组件</h1>
				<h3>数值:{{num}}</h3>
				<button @click="addNum">自增</button>
			</div>
		</template>
		
		<script src="../js/vue.js"></script>
		<!-- 定义组件 -->
		<script>
			//2.1创建组件
			Vue.component("addNumCom",{
				//2.2 定义组件内部的结构
				data(){
					return {
						num: 0
					}
				},
				//2.3 定义组件的标签体
				//方式一:字符串拼接 template: "<div> {{num}} <button @click='addNum'></button> </div>
				//方式二:ES6 模板字符串(块级作用域):template: `<table><tr> </tr></table>`	
				//方式三:template 模板语法
				template: "#addNumTem",
				methods: {
					addNum(){
						this.num++
					}
				}
			})
			
			//4.定义Vue对象
			const app=new Vue({
				el:"#app"
				
			})
		</script>
	</body>
</html>
